import React, { Component, Fragment } from 'react'
import { Table, Tag, Space, Button, Popconfirm } from 'antd'

// 组件
import AddCategory from './AddCategory'

// redux
import reduxStore from '@/redux/store'

// action
import { createCGAdd, createCGDEL } from '@/redux/actions/category'

const dataSource = [
  {
    id: 1,
    title: '水果',
    level: 'A',
    insert: 0,
    area: '浙江省-杭州市-钱塘区',
    address: '天街'
  },
  {
    id: 2,
    title: '水果',
    level: 'A',
    insert: 1,
    area: '浙江省-杭州市-钱塘区',
    address: '天街'
  },
  {
    id: 3,
    title: '水果',
    level: 'A',
    insert: 0,
    area: '浙江省-杭州市-钱塘区',
    address: '天街'
  },
  {
    id: 4,
    title: '水果',
    level: 'A',
    insert: 0,
    area: '浙江省-杭州市-钱塘区',
    address: '天街'
  },
  {
    id: 5,
    title: '水果',
    level: 'A',
    insert: 0,
    area: '浙江省-杭州市-钱塘区',
    address: '天街'
  },
  {
    id: 6,
    title: '水果',
    level: 'A',
    insert: 0,
    area: '浙江省-杭州市-钱塘区',
    address: '天街'
  },
  {
    id: 7,
    title: '水果',
    level: 'A',
    insert: 0,
    area: '浙江省-杭州市-钱塘区',
    address: '天街'
  },
  {
    id: 8,
    title: '水果',
    level: 'A',
    insert: 0,
    area: '浙江省-杭州市-钱塘区',
    address: '天街'
  },
  {
    id: 9,
    title: '水果',
    level: 'A',
    insert: 0,
    area: '浙江省-杭州市-钱塘区',
    address: '天街'
  },
  {
    id: 10,
    title: '水果',
    level: 'A',
    insert: 0,
    area: '浙江省-杭州市-钱塘区',
    address: '天街'
  }
]
export default class CategoryMgt extends Component {
  state = {
    isVisible: false,
    isLoading: false,
  }

  columns = [
    {
      title: '品类名称',
      dataIndex: 'title'
    },
    {
      title: '品类等级',
      dataIndex: 'level'
    },
    {
      title: '是否接入',
      dataIndex: 'insert',
      // render: (text) => <span>{text ? '已接入' : '未接入'}</span>
      render: (text) => {
        let color = text ? 'green' : 'red'
        let tzText = text ? '已接入' : '未接入'
        return <Tag color={color}>{tzText}</Tag>
      }
    },
    {
      title: '所属地区',
      dataIndex: 'area'
    },
    {
      title: '详细地址',
      dataIndex: 'address'
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" onClick={this.onEditTableItem}>编辑</Button>
          <Popconfirm title={`确认要删除【${record.title}】吗？`} onConfirm={this.onDelTableItem} okText="确认" cancelText="取消">
            <Button type="link">删除</Button>
          </Popconfirm>
        </Space>
      )
    }
  ]

  componentDidMount() {
    this.onRefresh()
  }

  /**
   * 刷新 Table
   */
  onRefresh = () => {
    this.setState({ isLoading: true }) 
    setTimeout(() => {
      this.setState({ isLoading: false }) 
    }, 200)
  }

  /**
   * 编辑品类 弹框 打开
   */
  onEditTableItem = () => {
    this.setState({ isVisible: true }) 
  }

  /**
   * 删除品类
   */
  onDelTableItem = () => {
    const data = {
      id: 1
    }
    reduxStore.dispatch(createCGDEL(data))
  }

  /**
   * 新增品类 弹框 打开
   */
  onShowAddTableItem = () => {
    this.setState({ isVisible: true }) 
  }

  /**
   * 新增品类 弹框 确认
   */
  onOk = () => {
    const data = {
      isAdd: 1
    }
    reduxStore.dispatch(createCGAdd(data))
    this.setState({ isVisible: false })
    this.onRefresh()
  }

  /**
   * 新增品类 弹框 取消
   */
  onCancel = () => {
    this.setState({ isVisible: false })
  }

  render() {
    const { isVisible, isLoading } = this.state
    return (
      <Fragment>
        {/* 操作区 */}
        <div style={{ marginBottom: '16px' }}>
          <Button type="primary" style={{ marginRight: '16px' }} onClick={this.onShowAddTableItem}>
            新增
          </Button>
          <Button type="primary" onClick={this.onRefresh}>查询</Button>
        </div>

        {/* Table 列表 */}
        <Table columns={this.columns} dataSource={dataSource} loading={isLoading} rowKey="id" bordered></Table>

        {/* 弹框·新增品类 */}
        <AddCategory isVisible={isVisible} onOk={this.onOk} onCancel={this.onCancel}></AddCategory>
      </Fragment>
    )
  }
}
